<template>
	<view>
		<view class="myorder">
			<view class="top-box" :class="type !== 1 ? 'z-flex-x-s-a' : ''" style="background-color: #FFF;">
				<u-tabs
				    v-if="type == 1"
					:list="cate1"
					:current="active"
					keyName="name"
					lineWidth="40"
					lineColor="#62CB81"
					@change="onChange"
					:activeStyle="{
						color: '#4B4B4C',
						fontWeight: 'bold'
					}"
					:inactiveStyle="{
						color: '#A4A9B7',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;margin-top:12rpx;"
				></u-tabs>
				
				<u-tabs
				    v-if="type == 2"
					:list="cate2"
					:current="active"
					keyName="name"
					lineWidth="40"
					lineColor="#62CB81"
					@change="onChange"
					:activeStyle="{
						color: '#4B4B4C',
						fontWeight: 'bold'
					}"
					:inactiveStyle="{
						color: '#A4A9B7',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 100rpx; padding-right: 100rpx; height: 34px;margin-top:12rpx;"
				></u-tabs>
				
				<u-tabs
				    v-if="type == 3"
					:list="cate3"
					:current="active"
					keyName="name"
					lineWidth="40"
					lineColor="#62CB81"
					@change="onChange"
					:activeStyle="{
						color: '#4B4B4C',
						fontWeight: 'bold'
					}"
					:inactiveStyle="{
						color: '#A4A9B7',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 30px; padding-right: 30px; height: 34px;margin-top:12rpx;"
				></u-tabs>
			</view>
			<view class="main-box">
				<scroll-view class="z-padding-32 scroll-box" :scroll-y="true" :show-scrollbar="false" :enhanced="true" @scrolltolower="more">
					<block v-for="(item, index) in list">
						<order :info="item" :type="2" @orderTap="orderTap" @orderBtnTap="orderBtnTap" @orderShopTap="orderShopTap"></order>
					</block>
					<!-- <van-empty description="暂无订单" v-if="{{finish && list.length === 0}}" /> -->
					<u-empty v-if="finish && list.length === 0" mode="" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</scroll-view>
			</view>
		</view>

		<u-popup :show="show" :round="10" closeable @close="onClose">
			<view class="popbox z-padding-32">
				<view class="z-flex z-font-w z-font-30">补差价</view>
				<view class="input_box z-padding-24 z-radius-24 z-margin-tb-32">
					<view class="z-font-30">补差价金额</view>
					<input placeholder="￥0.00" type="digit" v-model="price" />
				</view>
				<view class="z-font-22 text_999">*请与服务人员协商一致后再支付，如有异议请联系平台客服。平台仅对在线支付的项目提供交易保障，请勿线下支付</view>
				<van-divider />
				<view class="popbox_bottom">
					<view class="popbox_bottom_money">
						总计：
						<view class="money z-font-w">￥{{ price }}</view>
					</view>
					<van-button @tap="uppay" type="primary">立即支付</van-button>
				</view>
			</view>
		</u-popup>

		<u-popup :show="addShow" :round="10" closeable @close="onaddClose">
			<view class="popbox z-padding-32">
				<view class="z-flex z-font-w z-margin-b-24">加项</view>
				<scroll-view scroll-y="true" :show-scrollbar="false" :enhanced="true" style="height: 700rpx" @scrolltolower="pluscd">
					<view class="plus_item z-padding-24 z-radius-24 z-margin-b-24" v-for="(item, index) in addList">
						<view class="plus_item_left">
							<view class="z-font-w z-font-26">{{ item.name }}</view>
							<view class="z-margin-t-16">
								<text class="money z-font-26">￥{{ item.price }}</text>
								<text class="z-font-22">/{{ item.cost_seconds }}分钟</text>
							</view>
						</view>
						<!-- <van-stepper theme='round' min="{{0}}" integer value="{{ item.num }}" data-index="{{index}}" @change="plusonChange" /> -->
					</view>
				</scroll-view>
				<view class="text_999 z-font-22 z-margin-tb-32">*请与服务人员协商一致后再支付，如有异议请联系平台客服。平台仅对在线支付的项目提供交易保障，请勿线下支付</view>
				<van-divider />
				<view class="popbox_bottom">
					<view class="popbox_bottom_money">
						总计：
						<view class="money z-font-w">￥{{ allprice }}</view>
					</view>
					<van-button type="primary" bindtap="addpay">立即支付</van-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import http from '../../utils/http';
import order from '@/component/order.vue';
export default {
	components: {
		order
	},
	data() {
		return {
			show: false,
			addShow: false,
			active: 0,
			status: '',
			list: [],
			finish: false,
			loading: false,
			page: 1,
			price: '',
			order_id: '',
			type: 1,
			dot: false,
			addList: [],
			allprice: '',
			cate1:[
				{name:'全部'},
				{name:'待付款'},
				{name:'待服务/待核销'},
				{name:'服务中'},
				{name:'已完成'}
			],
			cate2:[
				{name:'待评价'},
				{name:'已评价'}
			],
			cate3:[
				{name:'售后中'},
				{name:'已退款'},
				{name:'拒绝'}
			]
		};
	},
	onLoad(options) {
		(this.type = options.type ? Number(options.type) : 1), (this.active = options.active ? Number(options.active) : 0), (this.dot = options.num > 0);
	},
	onShow() {
		this.reload();
	},
	methods: {
		onChange(e) {
			this.active = e.index;
			this.reload();
		},
		//进步器
		plusonChange(event) {
			let index = event.currentTarget.dataset.index;
			this.addList[index].num = event.detail;
			let allprice = 0;
			for (let i = 0; i < this.addList.length; i++) {
				allprice += this.addList[i].num * this.addList[i].price;
			}
			this.setData({
				addList: this.addList,
				allprice: allprice
			});
		},
		//立即支付
		addpay() {
			let add_ids = [];
			for (let i = 0; i < this.addList.length; i++) {
				if (this.addList[i].num > 0) {
					add_ids.push(this.addList[i].id + '-' + this.addList[i].num);
				}
			}
			if (add_ids.length === 0) return util.toast('请选择需要加的项目');
			this.addShow = false;
			uni.navigateTo({
				url: '/service/paypage/paypage?add_ids=' + add_ids.join(',') + '&order_id=' + this.order_id + '&type=2' + '&price=' + this.allprice
			});
		},
		uppay() {
			if (!this.price) return util.toast('请输入差价金额');
			this.show = false;
			uni.navigateTo({
				url: '/service/paypage/paypage?price=' + this.price + '&order_id=' + this.order_id + '&type=3'
			});
		},
		onaddClose() {
			(this.addShow = false), (this.allprice = 0);
		},
		onClose() {
			this.show = false;
		},

		orderTap(e) {
			this.util.skip('/service/orderdetail/orderdetail?id=' + e.id);
		},

		orderShopTap(e) {
			this.util.skip('/service/shopdetail/shopdetail?shop_id=' + e.shop_id);
		},
		orderBtnTap(e) {
			if (e.type == 3) {
				(this.show = true), (this.order_id = e.info.id);
			} else if (e.type == 2) {
				http.get('goods/goodsaddlist', {
					id: e.info.orderDetail.goods_id
				}).then((res) => {
					if (res.data.length === 0) {
						this.util.toast('该项目暂无可加的项目');
					} else {
						let arr = res.data.map((value) => {
							value.num = 0;
							return value;
						});
						(this.addShow = true), (this.addList = arr), (this.order_id = e.info.id);
					}
				});
			} else if (e.type == 1) {
				this.util.skip('/service/applyrefund/applyrefund?order_id=' + e.info.id, {
					applyRefund: () => {
						this.reload();
					}
				});
			} else if (e.type == 4) {
				this.util.skip('/service/paypage/paypage?price=' + e.info.payprice + '&order_id=' + e.info.id + '&type=1');
			} else if (e.type == 5) {
				this.util.skip('/service/gocomment/gocomment?order_id=' + e.info.id);
			} else if (e.type == 6) {
				this.util.skip('/service/ordercomments/ordercomments?order_id=' + e.info.id);
			}
		},
		reload() {
			(this.list = []), (this.page = 1), (this.finish = false);
			this.getList();
		},
		more() {
			this.page = ++this.page;
			this.getList();
		},
		getList() {
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true;
			let data = {
				page: this.page
			};
			if (this.type == 1) {
				if (this.active === 1) {
					data['status'] = 0;
				} else if (this.active === 2) {
					data['not_in_finish'] = 1;
				} else if (this.active === 3) {
					data['status'] = 5;
				} else if (this.active === 4) {
					data['finish'] = 1;
				} else if (this.active === 0) {
					data['is_all'] = 1;
				}
			} else if (this.type == 2) {
				if (this.active === 0) {
					data['status'] = 6;
				} else if (this.active === 1) {
					data['status'] = 7;
				}
			} else if (this.type == 3) {
				if (this.active === 0) {
					data['is_service'] = 1;
				} else if (this.active === 1) {
					data['is_service'] = 2;
				} else if (this.active === 2) {
					data['is_service'] = -1;
				}
			}
			http.get('order/userorderlist', data)
				.then((res) => {
					if (res.data.length === 0) {
						this.finish = true;
					}
					let arr = this.list.concat(res.data);
					this.list = arr;
				})
				.finally((res) => {
					this.loading = false;
				});
		}
	}
};
</script>

<style>
page {
	background: #edf1f4;
}
.myorder {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}
.top-box {
	flex-shrink: 0;
}
.main-box {
	flex: 1;
	overflow: hidden;
}
.scroll-box {
	box-sizing: border-box;
	height: 100%;
}
.popbox {
	width: 686rpx;
	box-sizing: border-box;
}

.money {
	color: #ff9600;
}
.input_box {
	background-color: #f5f7f9;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
input {
	text-align: right;
}
.popbox_bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.popbox_bottom_money {
	display: flex;
	align-items: center;
}
.van-button {
	border-radius: 15rpx !important;
}
.plusbox {
	box-sizing: border-box;
}
.plus_item {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #f5f7f9;
}
.plus_item_left {
	display: flex;
	flex-direction: column;
}
</style>
